<template>
	<view>
		<!-- 自定义头部 -->
		<!-- <view class="header">
			<view class="header-left">
				<image src="../../static/close.png" mode="" @tap="close"></image>
				<span>资料列表</span>
			</view>
			<view class="header-right">
				<image src="../../static/three_yuan.png" mode=""></image>
			</view>
		</view> -->
		<!-- 搜索功能 -->
		<view class="search">
			<view class="ipt-box">
				<input v-model="village" type="text" value="" placeholder="请输入搜索内容" placeholder-class="plac-class" />
				<image src="../../static/search1.png" mode="" @click="ziliao_search"></image>
			</view>
			<view class="header-right">
				<easySelect class="easySelect" style="width:400rpx;height:100%;font-size: 24rpx;color: #fff;" :options="options" ref="easySelect" size="medium" :value="selecValue" @selectOne="selectOne"></easySelect>
			</view>
		</view>
		<!-- 资料列表内容 -->
		<view class="ziliao_list" v-for="(item,index) in ziliao_list_detail" :key="index">
			<view class="ziliao_list_item">
				<view style="display: flex;">
					<text class="biaoti">标题 :</text>
					<text class="biaoti content">{{item.title}}</text>
				</view>
				<view style="display: flex;">
					<text class="biaoti">地址 :</text>
					<text class="biaoti content" style="width: 150rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><a _blank :href="item.upload_file">{{item.upload_file}}</a></text>
				</view>
				<view style="display: flex;">
					<text class="biaoti">描述 :</text>
					<text class="biaoti content">{{item.desc}}</text>
				</view>
				<view style="display: flex;">
					<text class="biaoti">上传日期 :</text>
					<text class="biaoti content">{{item.cteate_time}}</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import easySelect from '../../components/easy-select/easy-select';
	// import {
	// 	mapState,
	// 	mapMutations
	// } from 'vuex';
	export default {
		// computed: { ...mapState(['user']) },
		components: {
			easySelect
		},
		data() {
			return {
				ziliao_list_detail: [], //资料列表数据信息
				token: '',
				page: 1,
				village: '' ,//关键词搜索
				options: [],
				totwn: 0,
				selecValue: '类型1',
				track_id:1,//id
				upload_file:'',
			};
		},
	
		watch: {
			village(e) {
				if (!e) {
					this.ziliao_list()
				}
			}
		},
		onLoad(option) {
			// this.name = option.name
		},
		onShow() {
			uni.getStorage({
				key: 'token'
			}).then(da => {
				this.token = da[1].data
				this.ziliao_type()  //类型
			})
			setTimeout(() => {
				this.ziliao_list() //资料列表
			}, 10)
		},
		methods: {
			
			//点击选择类型
			selectOne(option) {
				console.log('option',option)
				this.ziliao_list_detail = []  //列表
				this.selecValue = option.label   //:value绑定的值
				this.track_id = option.id //id
				this.ziliao_list()
			},
			//上面的资料关闭按钮
			close() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			//资料列表接口信息
			ziliao_list() {
				let that = this
				that.$request.request({
					url: 'common/material_list',
					method: 'POST',
					data: {
						token: that.token,
						keyword: that.village,
						type:this.track_id ,//检索的类型  就是id
					}
				}).then(res => {
					if (res.data.code == 1) {
						console.log('资料列表',res.data.data.data)
						that.ziliao_list_detail = res.data.data.data
					}
				})
			},
			//资料类型
			async ziliao_type(){
			let that = this
			const res = await that.$request.request({
				url: 'common/material_type',
				method: 'POST',
				data: {
					token: that.token
				}
			})
			that.options = res.data.data
			console.log('资料类型',that.options)
			},
			//搜索接口
			ziliao_search() {
				this.ziliao_list_detail = []
				if (this.village == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
					this.ziliao_list()
					return
				}
				this.ziliao_list()
			},
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}

	// header
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 75rpx 30rpx 30rpx;
		background-color: #fff;

		.header-left {
			font-family: Source Han Sans SC, Source Han Sans SC-Medium;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			width: 52rpx;
			height: 52rpx;

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}
	}

	//搜索功能
	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		height: 80rpx;
		width: 100%;
		background-color: #003690;
		padding: 0 40rpx;

		.ipt-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			width: 514rpx;
			height: 52rpx;
			background-color: #fff;
			border-radius: 24rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.header-right {
			.leixing {
				font-size: 28rpx;
				font-family: Source Han Sans SC, Source Han Sans SC-Normal;
				font-weight: Normal;
				color: #e2ecfb;
				vertical-align: middle;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				vertical-align: middle;
				margin-left: 18rpx;
			}

		}
	}

	//资料列表
	.ziliao_list {
		margin: 30rpx;

		.ziliao_list_item {
			width: 93%;
			margin-top: 20rpx;
			height: 212rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 4rpx 6rpx 0px rgba(0, 30, 57, 0.1);
			padding: 20rpx;

			// box-sizing: border-box;
			.biaoti {
				font-size: 28rpx;
				font-family: Source Han Sans SC, Source Han Sans SC-Regular;
				font-weight: 400;
				color: #333333;
			}

			.content {
				color: #999999;
				margin-left: 10rpx;
			}
		}
	}
</style>
